<template>
  <div class="xiafa_sp" ref="userInfo">
    <el-dialog title="下发记录" class="noselect"
               v-dialogdrag=" { target:'.el-dialog__header',container:'.el-dialog',border:'.el-dialog__wrapper'}"
               :close-on-click-modal="false" :visible.sync="showDialog" :before-close="handleClose">
      <div class="record_content">


      <div style="margin: 20px;"></div>
      <template>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="props.row.details.dishes"
                style="width: 100%">
                <el-table-column
                label="商品编号" prop="no">
                </el-table-column>
                <el-table-column
                  label="商品条码" prop="code">
                  <template  slot-scope="scope">
                    <el-tooltip class="item" effect="light" placement="bottom-start" v-if="scope.row.codes && scope.row.codes.length>1">
                      <div slot="content">所选品项含有多个条码:<br/>
                        <div v-for="(item,index) in scope.row.codes">
                          <span>{{index+1}}、{{item}}</span>
                        </div>
                      </div>
                      <el-button  type="text" style="padding-top: 0; padding-bottom: 0">{{scope.row.code}}</el-button>
                    </el-tooltip>
                    <span v-else>{{scope.row.code}}</span><br />
                  </template>
                </el-table-column>
                <el-table-column
                label="商品名称" prop="name">
                </el-table-column>
                <el-table-column
                label="商品类型" prop="type">
                </el-table-column>
                <el-table-column
                label="商品单位" prop="unit">
                </el-table-column>
              </el-table>
              <el-table v-if="storeType=='ZC' || storeType=='KC' || storeType=='HB'"
                :data="props.row.details.materials"
                style="width: 100%">
                <el-table-column
                  label="原料编号" prop="no">
                </el-table-column>
                <el-table-column
                  label="原料名称" prop="name">
                </el-table-column>
                <el-table-column
                  label="原料规格" prop="goodsSpec">
                </el-table-column>
                <el-table-column
                  label="原料单位" prop="type">
                </el-table-column>
              </el-table>
            </template>
          </el-table-column>
          <el-table-column
            label="下发时间"
            prop="issueTime">
          </el-table-column>
          <el-table-column
            label="门店名称"
            prop="branchName">
          </el-table-column>
          <el-table-column
            label="商品库名称"
            prop="storeName">
          </el-table-column>
          <el-table-column
            label="下发商品数量"
            >
            <template  slot-scope="scope">
              <span v-if="scope.row.details.dishes"> {{scope.row.details.dishes.length}}</span>
              <span v-else>0</span>
            </template>

          </el-table-column>

          <el-table-column
            label="操作人"
            prop="operatorName">
          </el-table-column>
        </el-table>
        <br>
        <div class="block">
          <el-row>
            <el-col :span="24" class="text-right">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </el-col>
          </el-row>
        </div>
      </template>
        <div style="height: 20px;"></div>
      </div>


      <div style="margin-top: 60px">
        <div class="foot-bar-button">
          <el-button @click="handleClose" size="medium">退出</el-button>
        </div>
      </div>

    </el-dialog>
  </div>
</template>
<script>
  //注意路径
  export default {
    props: ['isShow', 'id'],  //参数
    data() {
      return {
        activityId:'',
        showDialog:false,
        tableData:[],
        storeType:"",
       currentPage:1,
        pageSizes:window.pageSizes,//所有可选择的条数
        pageSize:window.pageSize,//控制一页显示的条数
        total:10,//总条数
      };
    },

    watch: {
      isShow: function (newValue, oldValue) {
        this.showDialog = newValue;
        if (newValue) {
          if (this.id != '') {
            this.activityId = this.id;
            this.$axios.get("dishes/dishesMenus/getRecords", {id: this.activityId}).then(data => {
              if(data.status==200){
                this.tableData = data.content.records.content;
                this.total=data.content.records.totalElements
                if(this.tableData && this.tableData.length>0){
                  for(var i=0;i<this.tableData.length;i++){
                    this.tableData[i].details = JSON.parse(this.tableData[i].content);
                  }
                }
                this.storeType = data.content.storeType;
              }
            })
          }
        }
      }
    },
    created() {
      window.this = this;
    },
    methods: {
      goBack() {
        this.router.go(-1);
      },
      handleClose() {
        this.$emit('close');
        this.showDialog = false;
      },
      handleSizeChange(val){
        this.pageSize=val;
        this.getData();
      },
      handleCurrentChange(currentPage){
        this.currentPage=currentPage;
        this.getData();
      },
      getData(){
        this.$axios.get("dishes/dishesMenus/getRecords?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&id="+ this.activityId).then((data)=>{
          this.loading=false
          this.tableData=data.content.records.content;
          this.total=data.content.records.totalElements;
          if(this.tableData && this.tableData.length>0){
            for(var i=0;i<this.tableData.length;i++){
              this.tableData[i].details = JSON.parse(this.tableData[i].content);
            }
          }
          this.storeType = data.content.storeType;
        }).catch(function(err){
        })
      },
    }
  }
</script>
<style scoped>

  .cate {
    /*height: 100%;*/
  }

  .cate li {
    padding: 8px 0px;
    cursor: pointer;
  }

  .cate .activity {
    color: #fff !important;
    background-color: #428bca !important;
    border:1px solid #428bca !important;
  }

</style>
